<template>
	<view @tap="onCell" class="cl-cell" :class="{'disabled': disabled, 'active': isLink}" :style="{'height': height}">

		<view v-if="$slots.icon || icon" class="cl-cell__icon">
			<slot name="icon">
				<uni-icons :custom-prefix="isCustomize ? 'iconfont' : ''" :type="icon" :size="iconSize"
					:color="iconColor"></uni-icons>
			</slot>
		</view>

		<view :style="border ? '' : 'border: 0'" class="cl-cell__body">

			<view class="body__left">
				<view :style="[titleStyle]" class="title">{{title}}</view>
				<view v-if="$slots.label || label" class="label">
					<slot name="label">{{label}}</slot>
				</view>
			</view>

			<view class="body__right">

				<view class="right-value">
					<slot name="value">{{value}}</slot>
				</view>

				<view v-if="$slots.rightIcon || isLink" class="right-icon">
					<slot name="rightIcon">
						<uni-icons :type="rightIcon" :size="16" color="#999"></uni-icons>
					</slot>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		name: 'ClCell',
		props: {
			title: String,
			label: String,
			value: String,
			icon: String,
			isCustomize: Boolean,
			iconSize: {
				type: Number,
				default: 23
			},
			iconColor: {
				type: String,
				default: '#333'
			},
			border: {
				type: Boolean,
				default: true
			},
			url: String,
			linkType: {
				type: String,
				default: 'navigateTo'
			},
			rightIcon: {
				type: String,
				default: 'right'
			},
			isLink: {
				type: Boolean,
				default: true
			},
			isVibrate: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			name: [String, Number],
			titleStyle: {
				type: Object,
				default: () => ({})
			},
			height: String
		},
		data() {
			return {};
		},
		methods: {
			onCell() {
				if (this.disabled) {
					return false;
				}

				if (this.isVibrate) {
					uni.vibrate();
				}

				if (this.url) {
					uni[this.linkType]({
						url: this.url
					});
				}

				this.$emit('click', this.name);
			},
		}
	};
</script>
<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.disabled {
		background-color: rgba(255, 255, 255, 0.5) !important;

		.title,
		.uni-icons,
		.label {
			color: #ccc !important;
		}
	}

	.active {
		&:active {
			background-color: #f5f5f5;
		}
	}

	.cl-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding-left: 30rpx;
		box-sizing: border-box;

		.cl-cell__icon {
			margin-right: 30rpx;
			line-height: 1;
		}

		.cl-cell__body {
			position: relative;
			height: 100%;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f7f7f7;
			padding: 25rpx 0;

			.body__left {
				max-width: 70%;

				.title {
					font-size: 28rpx;
					color: #333;
				}

				.label {
					font-size: 24rpx;
					color: #a1a2a6;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.body__right {
				flex: 1;
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;

				.right-value {
					font-size: 28rpx;
					color: #666;
				}


				.right-icon {
					color: #808083;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>